<template>
  <div class="com-container">
    <div ref="visit_ref" class="com-chart" />
  </div>
</template>

<script>
import 'echarts/lib/component/geo'
import 'echarts/lib/chart/map'
import 'echarts/lib/component/visualMap'
import { getUserAreaList } from '@/api/dashBoard'
export default {
  data() {
    return {
      chartInstance: null,
      allData: [],
      mapData: {}, // 所获取的省份的地图矢量的缓存
      notAddress: 0
    }
  },
  mounted() {
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  methods: {
    screenAdapter() {
      this.chartInstance.resize()
    },
    async initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.visit_ref, this.theme)
      const res = require('@/assets/map/china.json')
      this.$echarts.registerMap('china', res)
      const initOption = {
        title: {
          text: '用户来源'
        },
        geo: {
          type: 'map',
          roam: true, // 鼠标滑动放大缩小
          map: 'china'
        },
        // '<img src="'+lt.avatar+'"/>'
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            let html = ''
            if (!params.data) return html
            html = '<div style="display: flex;align-items: center"><span style="font-size: x-small;margin-left: 5px">' + params.data.value + '人' + '</span></div> '
            return html
          }
        },
        legend: {
          left: '5%',
          bottom: '5%',
          orient: 'vertical'
        },
        visualMap: {
          itemWidth: 4,
          min: 0,
          max: 50,
          hoverLink: false,
          textStyle: {
            color: 'rgba(0,0,0,0.65)'
          },
          pieces: [{
            gte: 50,
            label: '>= 50',
            color: '#FF7C32'
          }, {
            gte: 30,
            lte: 49,
            label: '30 - 49',
            color: '#FDCC1A'
          }, {
            gte: 10,
            lte: 29,
            label: '10 - 29',
            color: '#5AD7D8'
          }, {
            gte: 1,
            lte: 9,
            label: '1 - 9',
            color: '#4174fe'
          }, {
            gte: 0,
            lte: 0,
            label: '0',
            value: 0,
            color: '#f5f5f5'
          }
          ]
        },
        series: [{
          type: 'map',
          geoIndex: 0,
          data: []
        }]

      }
      this.chartInstance.setOption(initOption)
    },
    async getData() {
      await getUserAreaList().then(response => {
        let items = []
        items = response
        for (let i = 0; i < items.length; i++) {
          const ls = items[i].split(',')
          if (ls[0] === null || ls[0] === undefined || ls[0] === '') {
            this.notAddress += parseInt(ls[1])
          }
          this.allData.push({ name: ls[0], value: ls[1] })
        }
        setTimeout(() => {
          this.updateChart()
        }, 300)
      })
    },
    updateChart() {
      const dataOption = {
        title: {
          text: '用户来源 tip：' + this.notAddress + '人未填地址'
        },
        series: [{
          data: this.allData
        }]
      }
      this.chartInstance.setOption(dataOption)
    }
  }
}
</script>

<style scoped lang="less">
  .com-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

</style>
